<?php

global $_base_dir;

$m = Model::getInstance();

// Pagina a mostrar, tiene a que sitio pertenece
$pages = $m->get('pages');

?>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- TODO: el estilo dependera del layout seleccionado -->
    <style type="text/css">
      .zone {
        background-color: #ffcc00;
      }
      .moduleContainer {
        background-color: #ccff00;
        margin: 1px;
        border: 1px solid #000;
        padding: 5px; /* para que se vea el containder verde */
      }
      .moduleTopBar {
        background-color: #aaccff;
        padding: 3px;
      }
      .moduleActions {
        background-color: #ccddff;
        display: inline-block;
        float: right;
      }
      .moduleActions img {
        border: 0px;
      }
      .moduleContent {
        background-color: #ccffff;
        padding: 3px;
      }
      /* Global, es el menu para editar lo que se esta viendo */
      #topbar {
        height: 30px;
        background-color: #fc3;
        overflow: visible;
        position: relative;
        z-index: 999;
        padding: 5px;
        margin: 10px;
      }
      #topbar ul {
        margin: 0px;
        padding: 0px;
        list-style-type: none; /* para hacer el menu horizontal */
      }
      #topbar ul li {
        display: inline;
        float: left;
        padding: 5px;
        margin-right: 5px;
      }
      #topbar ul li:hover {
        background-color: #cf3;
      }
      /* estilo para el segundo nivel del menu */
      #topbar ul ul {
        position: absolute;
        z-index: 1000;
        float: left;
        padding: 5px;
        background-color: #cf3;
        margin-left: -5px; /* para que el ul ul aparezca alineado con el ul li donde puse el mouse para que el submenu ul ul este visible */
      }
      #topbar ul li li {
        display: block;
        float: none;
      }
      /* Es necesario mover el contenido de las zonas para abajo,
         tanto como la altura de la topbar cuando la topbar es visible,
         o sea, cuando esta en modo edicion.
         De lo contrario, las zonas tapan la topbar.
       */
       
      
      /* Estilo del listado */
      body {
         font-family: arial, verdana, tahoma;
         font-size: 12px;
         background-color: #efefef;
      }
      table {
         border: 1px solid #000;
         /* spacing: 0px; */
         border-collapse: separate;
         border-spacing: 0px;
      }
      th {
         border-bottom: 1px solid #ddd;
         padding: 5px;
         background-color: #ddd;
         color: #000;
         background: #fff url(<?php echo $_base_dir; ?>/images/shadow.jpg) bottom repeat-x;
         font-family: arial, verdana, tahoma;
         font-size: 12px;
      }
      td {
         border-bottom: 1px solid #ddd;
         padding: 5px;
         background-color: #f5f5f5;
         font-family: arial, verdana, tahoma;
         font-size: 12px;
      }
      #actions {
          background: #fff url(<?php echo $_base_dir; ?>/images/shadow.jpg) bottom repeat-x;
          border: 1px solid #ccc;
          border-style: solid none solid none;
          padding: 7px 12px;
      }
      #actions a {
        padding-right: 5px;
        padding-left: 5px;
      }
      .order_desc, .order_asc {
         background-position: 0px;
         background-repeat: no-repeat;
         padding-left: 12px;
      }
      .order_asc {
         background-image: url(<?php echo $_base_dir; ?>/images/order_asc.gif);
      }
      .order_desc {
         background-image: url(<?php echo $_base_dir; ?>/images/order_desc.gif);
      }
      
      /* http://a.shinynew.me/post/4641524290/jquery-ui-nested-sortables */
      ul { min-height: 10px; }
      /*li { width: 150px; }*/
      /*li { margin: 0 0 5px 0; padding: 5px 0 15px 0; }*/
      /*
      ul {
        list-style: none;
        margin-left: 0px;
        padding-left: 0px;
      }
      .page {
        padding-top: 5px;
        margin-top: 5px;
      }
      .pages {
        padding: 0 10px 15px 10px;
        border: 1px dashed #000;
      }
      .normal {
        background-color: #dfd;
      }
      .draft {
        background-color: #ddf;
      }
      .hidden {
        background-color: #ddd;
      }
      .disabled {
        background-color: #fd9;
      }
      .deleted {
        background-color: #fdd;
      }
      */
      .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
        border: 1px solid #fcefa1;
        background: #fbf9ee;
        color: #363636;
      }
    </style>
    <?php echo h('js', array('app'=>'cms2', 'name'=>'jquery/jquery-1.7.1.min')); ?>
    <?php echo h('js', array('app'=>'cms2', 'name'=>'superfish-1.4.8/js/superfish')); ?>
    <?php echo h('js', array('app'=>'cms2', 'name'=>'jquery/jquery-ui-1.8.17.sortable.min')); ?><!-- para el sortable -->
    <!-- le da estilo al placeholder del softable -->
    <script type="text/javascript">
      $(document).ready( function() {
        
        // Menu desplegable para la topbar:
        $('#topbar > ul').superfish({ 
            delay:       600,                             // one second delay on mouseout 
            animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation 
            speed:       'fast',                          // faster animation speed 
            autoArrows:  false                            // disable generation of arrow mark-up 
        });
        
        $('a#delete_page').click( function(evt) {
            
          return confirm("\u00BFRelmente desea eliminar esta pagina?");
        });
        
        /*
        $(".pages").sortable({
            
          connectWith: ".pages",
          placeholder: 'ui-state-highlight',
          
          // se llama por cada listado afectado, o sea 2 veces (de la que saco y en la que pongo).
          // llama una sola vez si la pagina se mueve en la misma zona.
          update: function(event, ui) {
            
            console.log(event.target);
            //console.log($(event.target).attr('id'));
          }
        });
        */
        
        $("#container ul").sortable({
           connectWith: "#container ul",
           placeholder: "ui-state-highlight",
           update: function(event, ui) {
            
            // si el source es el ul ppal, solo se llama una vez con el
            // target siendo ese modulo, no se llama con el destino y
            // lo necesitaria.
            // ui.item es el item movido, con eso podria actualizar la estructura,
            // porque tengo que sacar la pagina de su parent actual y meterla en
            // el nuevo parent, y el nuevo parent lo puedo sacar viendo en el DOM
            // cual LI es parent de la LI que movi.
            
            console.log(event.target); // UL desde donde tomo el LI a arrastrar
            //console.log(ui.item); // LI item que arrastro (como un array/objeto)
            //console.log(ui.item.parent()); // UL .pages de la nueva pagina padre
            
            // Nuevo parent_id
            //console.log(ui.item.parent().attr('id')); // of_pageId (si pageId==root, no tiene padre)
            var parentId = ui.item.parent().attr('id').split("_")[1];
            console.log(parentId);
            
            // Obtiene los hermanos de la pagina que movi,
            // porque el orden dentro de las subpages importa.
            //console.log(ui.item.parent().children());
            var page_ids = new Array();
            $.each( ui.item.parent().children(), function (i, item) {
              
              // ids de los hijos, en el orden correcto
              //console.log( $(item).attr('id') ); // page_pageId
              page_ids.push( $(item).attr('id').split('_')[1] );
            });
            
            //console.log(page_ids);
            
            
            $.get("<?php echo h('url', array('action'=>'updatePageStruct')); ?>", { 
                  'parentId': ((parentId == 'root')?'':parentId),
                  'pageIds[]': page_ids
                 });
            
          }
        });
      });
    </script>
  </head>
  <body>
    <h1>Gestionar paginas</h1>
  
    <!-- aca van a estar las acciones de gestion -->
    <div id="topbar">
      <ul>
        <li>
          Paginas
          <ul>
            <li>
              <?php echo h('link', array('action'=>'createPage', 'body'=>'Nueva')); ?>
            </li>
          </ul>
        </li>
        <li>
          Modulos
          <ul>
            <li>
              <?php echo h('link', array('action'=>'listModules', 'body'=>'Listado de modulos')); ?>
            </li>
        </li>
      </ul>
    </div>
  
    <!-- feedback podria ser un modulo por defecto, ahi se imprimen los feedbasck y errores -->
    <!-- tambien, cada modulo podria tener su propio feedback para sus mensajes -->
    <?php if ($m->flash('message')) { ?>
      <div class="flash"><?php echo $m->flash('message'); ?></div>
    <?php } ?>

    <table>
      <tr>
        <th>Nombre</th>
        <th>Creada</th>
        <th>Ultima actualizacion</th>
        <th>Estado</th>
        <th>Borrado</th>
        <th>Acciones</th>
      </tr>
      <?php foreach ( $pages as $page ): ?>
        <tr>
          <td>
            <?php echo h('link', array('body'=>$page->getName(), 'action'=>'displayPage', 'pageId'=>$page->getId()) ); ?>
          </td>
          <td>
            <?php echo $page->getCreatedOn(); ?>
          </td>
          <td>
            <?php echo $page->getLastUpdate(); ?>
          </td>
          <td>
            <?php echo $page->getStatus(); ?>
          </td>
          <td>
            <?php echo (($page->getDeleted())?'Si':'No'); ?>
          </td>
          <td>
            <?php echo h('link', array('body'=>'Editar', 'action'=>'editPage', 'pageId'=>$page->getId(), 'backend'=>true, 'attrs'=>array('id'=>'edit_page')) ); ?>
            <?php
            if ($page->getDeleted())
              echo h('link', array('body'=>'Recuperar', 'action'=>'undeletePage', 'pageId'=>$page->getId(), 'backend'=>true, 'attrs'=>array('id'=>'undelete_page')) );
            else
              echo h('link', array('body'=>'Eliminar', 'action'=>'deletePage', 'pageId'=>$page->getId(), 'backend'=>true, 'attrs'=>array('id'=>'delete_page')) );
            ?>
          </td>
        </tr>
      <?php endforeach; ?>
    </table>
    
    <pre>
    Hay un problema para mantener el ord en el primer nivel porque no hay un contenedor...
    1. podria agregar un atributo ord que se usaria solo en las paginas del nivel 1 (porque para las subpages de una pagina se usa el ord del ObjRef de la tabla intermedia del hasMany)
    2. podria crear una pagina dummy "root" que contenga las paginas del primer nivel pero solo eso, no es una pagina fisica que sirva para algo.
    </pre>
    
    <?php
    
    $_action = 'qwerty';
    
    // Mismo codigo que en MenuModule.displayModule.
    if (!function_exists('displayPagesRecursive')) // necesario por si se ponen 2 modulos menu en la misma pagina, para que no diga que la funcion se declaro 2 veces.
    {
       function displayPagesRecursive($page, $_action)
       {
          echo '<li class="page '. $page->getStatus() .'" id="page_'.$page->getId().'">';
          //echo h('link', array('controller'=>'cms', 'action'=>$_action, 'pageId'=>$page->getId(), 'body'=>$page->getName()));
          echo $page->getName();
          
          $subpages = $page->getSubpages();
          // Dejo que cree un subpages vacio para poder arrastrar ahi
          //if (count($subpages)>0)
          //{
             //echo h('img', array('app'=>'cms2', 'src'=>'plus_icon.gif'));
             echo '<ul class="pages" id="of_'.$page->getId().'">';
             foreach ($subpages as $subpage)
             {
                displayPagesRecursive($subpage, $_action);
             }
             echo '</ul>';
          //}
          echo '</li>';
       }
    }
    
    echo '<div id="container"><ul class="pages main" id="of_root">';
    foreach ($pages as $p)
    {
       echo '<li class="page '. $p->getStatus() .'" id="page_'.$p->getId().'">';
       //echo h('link', array('controller'=>'cms', 'action'=>$_action, 'pageId'=>$p->getId(), 'body'=>$p->getName()));
       echo $p->getName();
          
       $subpages = $p->getSubpages();
       // Dejo que cree un subpages vacio para poder arrastrar ahi
       //if (count($subpages)>0)
       //{
          //echo h('img', array('app'=>'cms2', 'src'=>'plus_icon.gif'));
          echo '<ul class="pages" id="of_'.$p->getId().'">';
          foreach ($subpages as $subpage)
          {
             // Como se pueden eliminar paginas y mantenerse en las subpages, debo preguntar si no esta eliminada para mostrarla en el menu.
             displayPagesRecursive($subpage, $_action);
          }
          echo '</ul>';
       //}
       echo '</li>';

       // Deja breaks solo si es vertical
       //if ($module->getVertical()) echo '<br/>';
    }
    echo '</ul></div>';
    ?>
  </body>
</html>